<template>
	<view class="page">
		<map id="map" class="map" :markers="markers" :polyline="polylines" :style="{'height': pageHeight + 'px'}"
		:latitude="latitude" :longitude="longitude" :scale="15" @bindinterpolatepoint="aa"></map>
		<view class="pop">
			<view>
				<text>当前时间：{{current.gdt}}</text>
			</view>
			<view class="margin-top-5">
				<text class="text">当前速度：{{current.spd}}km/h</text>
			</view>
			<view class="margin-top-5" style="height: 34px;">
				<text class="text">当前位置：{{current.ars}}</text>
			</view>
			<view class="linear-horizontal flex-align-center">
				<view @click="onPlayClick" class="play linear-horizontal flex-center">
					<image class="size-16" :src="isPlay ? '/static/images/trajectory_pause.png' : '/static/images/trajectory_play.png'"></image>
				</view>
				<text style="margin-left: 10px;">{{sliderStartTime}}</text>
				<view class="flex-1">
					<u-slider v-model="progress" min="0" :max="list.length - 1" @change="onSliderChange" @changing="onSliderChanging"></u-slider>
				</view>
				<text style="margin-right: 10px;">{{sliderEndTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageHeight: 0,
				numberPlate: '',
				dvo: '',
				startTime: '',
				endTime: '',
				list: [],
				current: {
					gdt: '',
					spd: 0,
					ars: ''
				},
				latitude: 39.91,
				longitude: 116.40,
				progress: 0,
				isPlay: false,
				sliderStartTime: '',
				sliderEndTime: '',
				markers: [],
				polylines: [],
				moveIndex: 0
				
			}
		},
		onLoad(options) {
			let sys = uni.getSystemInfoSync()
			this.pageHeight = sys.windowHeight
			this.numberPlate = options.numberPlate
			this.dvo = options.dvo
			this.startTime = options.startTime
			this.endTime = options.endTime
			uni.setNavigationBarTitle({
				title: this.numberPlate
			})
			this.loadData()
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);
		},
		methods: {
			loadData(){
				this.api.postQuery(this.apiUrl.trajectoryDetail, {
					dvo: this.dvo,
					startTime: this.startTime,
					endTime: this.endTime,
				}).then(res => {
					this.list = res
					this.current = res[0]
					this.sliderStartTime = res[0].gdt.split(" ")[1].substring(0, 5)
					this.sliderEndTime = res[res.length - 1].gdt.split(" ")[1].substring(0, 5)
					this.updateMapUI()
				})
			},
			onPlayClick(){
				this.isPlay = !this.isPlay
				if(this.isPlay){
					this.startMove()
				}else{
					this.stopMove()
				}
			},
			startMove(){
				if(this.moveIndex >= this.list.length - 1){
					this.moveIndex = 0
				}
				let points = this.list.slice(this.moveIndex, this.list.length).map(it => {
					return {
						latitude: it.lat,
						longitude: it.lng
					}
				})
				let duration =  (points.length / this.list.length) * 60 * 1000
				this._mapContext.moveAlong({
					markerId: 1,
					path: points,
					duration: duration
				})
				this.moveInterval = setInterval(() => {
					this.moveIndex++
					this.current = this.list[this.moveIndex]
					this.progress = this.moveIndex
					if(this.moveIndex >= this.list.length - 1){
						clearInterval(this.moveInterval)
						this.moveInterval = null
						this.isPlay = false
					}
				}, duration / points.length)
			},
			stopMove(){
				let point = this.list[this.moveIndex]
				this._mapContext.moveAlong({
					markerId: 1,
					path: [{
						latitude: point.lat,
						longitude: point.lng
					}],
					duration: 1
				})
				clearInterval(this.moveInterval)
				this.moveInterval = null
				this.isPlay = false
			},
			onSliderChange(e){
				this.moveIndex = e
				this.current = this.list[e]
				let marker = this.markers[0]
				let point = this.list[e]
				marker.latitude = point.lat,
				marker.longitude = point.lng,
				this.$set(this.markers, 0, marker)
			},
			onSliderChanging(e){
				if(this.moveInterval){
					this.stopMove()
				}
			},
			updateMapUI(){
				let first = this.list[0]
				let last = this.list[this.list.length - 1]
				let points = this.list.map(it => {
					return {
						latitude: it.lat,
						longitude: it.lng
					}
				})
				this.polylines.push({
					points: points,
					color: '#2F7FF0',
					width: 4
				})
				this.markers.push({
					id: 1,
					latitude: first.lat,
					longitude: first.lng,
					iconPath: '/static/images/map_vehicle_online.png',
					width: 25,
					height: 44,
					anchor: {x: 0.5, y: 0.5},
				})
				this.markers.push({
					id: 2,
					latitude: first.lat,
					longitude: first.lng,
					iconPath: '/static/images/trajectory_start.png',
					width: 31,
					height: 31,
					anchor: {x: 0.5, y: 1}
				})
				this.markers.push({
					id: 3,
					latitude: last.lat,
					longitude: last.lng,
					iconPath: '/static/images/trajectory_end.png',
					width: 31,
					height: 31,
					anchor: {x: 0.5, y: 1}
				})
				this._mapContext.includePoints({
					points: points,
					padding: [50, 50, 50, 50]
				})
			},
			aa(e){
				console.log(e);
			}
		}
	}
</script>

<style>
	
	.page{
		position: relative;
		width: 100vw;
		height: 100vh;
	}
	
	.map{
		position: absolute;
		width: 750rpx;
	}
	
	.pop{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding: 10px 15px;
		color: #5C6166;
		font-size: 13px;
	}
	
	.numberplate{
		color: #18191A;
		font-size: 20px;
		font-weight: bold;
		margin-left: 6px;
	}
	
	.speed{
		color: #2F7FF0;
		font-size: 18px;
		font-weight: 600;
		margin-left: 20px;
	}
	
	.play{
		width: 40px;
		height: 40px;
		background-color: white;
		border-radius: 99px;
		box-shadow: 0px 20px 40px 0px rgba(8,27,74,0.1);
		border: 1px solid #DAE0E6;
	}
	
	.speed-mode{
		color: #2F7FF0;
		font-size: 14px;
		padding: 4px 10px;
		border: 1px solid #2F7FF0;
		border-radius: 99px;
	}
</style>
